import React, {FC, useCallback} from 'react';
import {
  View,
  Text,
  StyleSheet,
  useWindowDimensions,
  Image,
  TouchableOpacity,
} from 'react-native';
import ResizeImage from '../../../components/ResizeImage';
import Heart from '../../../components/Heart';
import {useNavigation} from '@react-navigation/native';
import {StackNavigationProp} from '@react-navigation/stack';
import {RootStackParamList} from '../../../../App';
type PropsType = {
  item: ArticleSimple;
};
const Item: FC<PropsType> = (props: PropsType) => {
  const {item} = props;
  const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();
  const onArticlePress = useCallback(
    (article: ArticleSimple) => () => {
      navigation.push('ArticleDetail', {id: article.id});
    },
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [],
  );

  const {width: SCREEN_WIDTH} = useWindowDimensions();
  const itemStyles = StyleSheet.create({
    item: {
      width: (SCREEN_WIDTH - 18) / 2,
      backgroundColor: 'white',
      marginLeft: 6,
      marginBottom: 6,
      borderRadius: 8,
      overflow: 'hidden',
    },
  });
  return (
    <TouchableOpacity style={itemStyles.item} onPress={onArticlePress(item)}>
      <ResizeImage uri={item.image} />
      <Text style={styles.titleTxt}>{item.title}</Text>
      <View style={styles.nameLayout}>
        <Image style={styles.avatarImg} source={{uri: item.avatarUrl}} />
        <Text style={styles.nameTxt}>{item.userName}</Text>
        <Heart
          value={item.isFavorite}
          onValueChange={(value: boolean) => {
            console.log(value);
          }}
        />
        <Text style={styles.countTxt}>{item.favoriteCount}</Text>
      </View>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  itemImg: {
    width: '100%',
    height: 250,
    resizeMode: 'cover',
  },
  titleTxt: {
    fontSize: 14,
    color: '#333',
    marginHorizontal: 10,
    marginVertical: 4,
  },
  nameLayout: {
    width: '100%',
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 10,
    paddingVertical: 4,
  },
  avatarImg: {
    width: 20,
    height: 20,
    resizeMode: 'cover',
    borderRadius: 10,
    marginEnd: 4,
  },
  nameTxt: {
    fontSize: 12,
    color: '#999',
    flex: 1,
  },
  heartImg: {
    width: 20,
    height: 20,
    resizeMode: 'contain',
  },
  countTxt: {
    fontSize: 14,
    color: '#999',
    marginLeft: 4,
  },
});

export default Item;
